<template>
    <div>
        <h3 class="ivu-mt-8">人员报表</h3>
        <Form class="ivu-mt-16 ivu-mb-16">
            <DatePicker :editable="false"
                v-model="timeArr"
                v-width="200"
                class="ivu-mr-8"
                type="daterange"
                @on-change="changeParams"
            />
            <Select
                v-width="130"
                clearable
                filterable
                class="ivu-ml-8"
                v-model="channel"
                placeholder="请选择部门"
                @on-change="changeParams"
            >
                <Option
                    v-for="(item, index) in departmentList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}</Option
                >
            </Select>
        </Form>
        <Table
            :max-height="500"
            :columns="columns"
            :data="dataWithPage"
            :loading="loading"
            show-summary
            :summary-method="handleSummary"
        >
        </Table>
    </div>
</template>
<script>
import dayjs from "dayjs";
import { getMemberRate } from "@/api/TApi/index.js";
export default {
    name: "consultant",
    props: {
        departmentList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            timeArr: [],
            channel: "",
            loading: false,
            mj: {
                normal: "",
                desc: 2,
                asc: 1,
            },
            sortParams: {
                all_created: "",
                created_visit: "",
                all_visit: "",
                all_first_consume: "",
            },
            dataWithPage: [],
            columns: Object.freeze([
                {
                    title: "人员",
                    key: "realname",
                    minWidth: 100,
                },
                {
                    title: "新增",
                    key: "all_created",
                    minWidth: 100,
                    sortable: true,
                },
                {
                    title: "新增到诊",
                    key: "created_visit",
                    minWidth: 100,
                    sortable: true,
                },
                {
                    title: "总到诊",
                    key: "all_visit",
                    minWidth: 100,
                    sortable: true,
                },
                {
                    title: "到诊率",
                    key: "visit_rate",
                    minWidth: 100,
                    sortable: true,
                    render: (h, params) => {
                        return h(
                            "div",
                            {},
                            parseInt(params.row.visit_rate * 1000) / 10 + "%"
                        );
                    },
                },
                {
                    title: "到诊占比",
                    key: "visit_percent",
                    minWidth: 100,
                    render: (h, params) => {
                        return h(
                            "div",
                            {},
                            parseInt(params.row.visit_percent * 1000) / 10 + "%"
                        );
                    },
                },
            ]),
        };
    },
    mounted() {
        this.timeArr = [
            dayjs(new Date()).startOf("month"),
            dayjs(new Date()).endOf("month"),
        ];
        this.channel = this.departmentList.filter(
            (ee) => ee.department_type === "1"
        )[0].value;
        this._getMemberRate();
    },
    methods: {
        handleSummary({ columns, data }) {
            const sums = {};
            columns.forEach((column, index) => {
                const key = column.key;
                if (key === "visit_percent" || key === "visit_rate") {
                    return (sums[key] = {
                        key,
                        value: "",
                    });
                } else {
                    if (index === 0) {
                        sums[key] = {
                            key,
                            value: "合计",
                        };
                        return;
                    }
                    const values = data.map((item) => Number(item[key]));
                    if (!values.every((value) => isNaN(value))) {
                        const v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[key] = {
                            key,
                            value: v,
                        };
                    } else {
                        sums[key] = {
                            key,
                            value: "N/A",
                        };
                    }
                }
            });

            return sums;
        },
        changeParams() {
            this._getMemberRate();
        },
        _getMemberRate() {
            let params = {
                start_time: this.timeArr[0]
                    ? dayjs(this.timeArr[0]).format("YYYY-MM-DD")
                    : "",
                end_time: this.timeArr[1]
                    ? dayjs(this.timeArr[1]).format("YYYY-MM-DD")
                    : "",
                department_id: this.channel,
                sort_all_created: this.sortParams.all_created,
                sort_created_visit: this.sortParams.created_visit,
                sort_all_visit: this.sortParams.all_visit,
                sort_all_first_consume: this.sortParams.all_first_consume,
            };
            this.loading = true;
            getMemberRate(params).then((res) => {
                this.loading = false;
                this.dataWithPage = Object.freeze(res);
            });
        },
    },
};
</script>
